<template>
<p>
    <Select v-model="model.shippingTemplateId" @on-change="handleShippingTemplateChange" :size="size" style="width:200px">
        <Option v-for="item in shippingTemplates" :value="item.id" :key="item.id">{{ item.name }}</Option>
    </Select>
    <span pd2 red>运费：￥{{currentShippingTemplate.freight}}</span>
</p>
</template>

<script lang="ts">
import { Component, Vue,Inject, Prop,Watch } from 'vue-property-decorator';
import AbpBase from '../../lib/abpbase'

@Component
export default class Coupon extends AbpBase{
	@Prop() value:any;
	@Prop({type:String,default:'default'}) size:String; 
    get model() {
        return this.value;
    }
	get shippingTemplates():Array<any> {
		var templates = this.$store.state.setting.settings.shippingTemplates;
		var templateType = this.$store.state.setting.settings.distribution.templateType;
		var temp = templates.reduce((result, elem) => {
			if(elem.enabled && elem.templateType == templateType) {
				result.push(elem);
			}
			return result;
		}, []);
		return temp;
	}
	get currentShippingTemplate() {
		return this.shippingTemplates.find(elem => elem.id == this.model.shippingTemplateId) || {};
	}
	async handleShippingTemplateChange(){
		if(this.model.shippingTemplateId){
			this.model.freightAmount = this.currentShippingTemplate.freight;
			this.$emit('on-change');
		}
	}
}
</script>

<style>

</style>
